import React from "react";
import Paragraph from "antd/es/typography/Paragraph";
import { Tag } from "antd";
import "./index.css";

interface Props {
  user: API.LoginUserVO;
}

// 定义标签选项
const tagOptions = [
  { label: '前端开发', value: 'frontend' },
  { label: '后端开发', value: 'backend' },
  { label: '算法', value: 'algorithm' },
  { label: '数据库', value: 'database' },
  { label: '系统设计', value: 'system-design' },
  { label: '机器学习', value: 'machine-learning' },
];

/**
 * 用户个人资料
 * @param props
 * @constructor
 */
const UserInfo = (props: Props) => {
  const { user } = props;

  // 获取标签显示文本
  const getTagLabel = (value: string) => {
    const option = tagOptions.find(opt => opt.value === value);
    return option ? option.label : value;
  };

  return (
    <div className="user-info">
      <div style={{ textAlign: "left" }}>
        {/* 手机号 */}
        <Paragraph type="secondary">
          手机号：{user.phoneNumber || "未填写"}
        </Paragraph>
        {/* 邮箱 */}
        <Paragraph type="secondary">邮箱：{user.email || "未填写"}</Paragraph>

        {/* 年级 */}
        <Paragraph type="secondary">年级：{user.grade || "未填写"}</Paragraph>

        {/* 工作经验 */}
        <Paragraph type="secondary">
          工作经验：{user.workExperience || "未填写"}
        </Paragraph>

        {/* 擅长方向 */}
        <Paragraph type="secondary">
          擅长方向：{user.expertiseDirection || "未填写"}
        </Paragraph>

        {/* 感兴趣的方向 */}
        <Paragraph type="secondary">
          感兴趣的方向：
          {user.userTags && user.userTags.length > 0 ? (
            <span style={{ marginLeft: 8 }}>
              {user.userTags.map((tag, index) => (
                <Tag key={index} color="blue" style={{ marginRight: 8 }}>
                  {getTagLabel(tag)}
                </Tag>
              ))}
            </span>
          ) : (
            "未填写"
          )}
        </Paragraph>
      </div>
    </div>
  );
};

export default UserInfo;